<!-- TestReportPage.vue -->
<template>
  <div class="test-report-page p-6 bg-gray-50 min-h-screen">
    <h2 class="page-title mb-6 flex items-center">
      <el-icon><Document /></el-icon>
      <span class="ml-2">测试报告详情</span>
    </h2>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" type="card" class="mb-6">
      <el-tab-pane name="functional" label="📌 功能测试报告" />
      <el-tab-pane name="benchmark" label="⚡ 性能压测报告" />
    </el-tabs>

    1. 功能测试报告
    <div v-if="activeTab === 'functional'">
      <ReportListSimple result="functional" />
    </div>

    <!-- 2. 压测报告 -->
    <div v-else-if="activeTab === 'benchmark'">
      <ReportListMultiple result="benchmark" />
    </div>

    <!-- 底部操作 -->
    <div class="mt-8 text-right">
      <el-button @click="$router.back()">← 返回</el-button>
      <el-button v-if="activeTab === 'benchmark'" type="primary" @click="exportBenchmark">
        📥 导出压测报告
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

import ReportListSimple from './ReportListSimple.vue'
import ReportListMultiple from './ReportListMultiple.vue'

// 接收两个结果数据
const props = defineProps({
  functionalResult: {
    type: Object,
    default: () => ({}),
  },
  benchmarkResult: {
    type: Object,
    default: () => ({}),
  },
})

// 当前激活的标签页
const activeTab = ref('functional')

// 是否有压测数据
const hasBenchmark = computed(() => {
  return !!props.benchmarkResult?.total_requests
})

// 如果没有压测数据，默认显示功能测试
watch(
  () => props.benchmarkResult,
  (val) => {
    if (!val || Object.keys(val).length === 0) {
      activeTab.value = 'functional'
    }
  },
)

// 导出压测报告
const exportBenchmark = () => {
  if (!hasBenchmark.value) {
    ElMessage.warning('暂无压测数据可导出')
    return
  }
  const dataStr = JSON.stringify(props.benchmarkResult, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `benchmark-report-${Date.now()}.json`
  a.click()
  ElMessage.success('压测报告已导出')
}
</script>

<style scoped>
.page-title {
  font-size: 1.5rem;
  color: #1f2937;
}
.test-report-page {
  background: #f8fafc;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
</style>
